/**
 * @class RefApp.views.MenuPopup
 * @extends Ext.Panel
 * The panel containing buttons to add item to cart or make an order.
 */

RefApp.views.MenuPopup = Ext.extend(Ext.Panel, {
	id: 'menuPopup',
	
	// initial properities
	floating : true,
	modal : true,
	centered : true,
	width : 300,
	height : 185,
	scroll : 'vertical',
	styleHtmlContent : true,
	
	// init component function
	initComponent : function(){
		var itemData = this.itemData,
			size = this.size,
			html,
			toolbar, buttons, cancel, add, order;
		
		html = "<p>Czy chcesz dodać do koszyka:</br>" + this.itemData.text + " (" + this.size + ")?</p>";
		
		// buttons description
		toolbar = {
			dock: 'top',
			xtype: 'toolbar',
			title: 'Potwierdzenie'
		};
			
		cancel = {
			text : 'Anuluj',
			ui : 'decline',
			handler : this.onCancel,
			scope: this
		};
			
		add = {
			text : 'Dodaj',
			handler : this.onAdd,
			scope: this
		};
			
		order = {
			text : 'Zamów',
			ui : 'confirm',
			handler : this.onOrder,
			scope: this
		};	
			
		buttons = {
			dock : 'bottom',
			xtype : 'toolbar',
			title : 'buttons',
			defaults : {
				xtype : 'button',
				flex : 1
			},
			items : [cancel, add, order]
		};
		
		// apply properties to the panel
		Ext.apply(this, {
			html: html,
			dockedItems: [toolbar, buttons]
		});
		
		RefApp.views.MenuPopup.superclass.initComponent.call(this);
	},
	
	// called when cancel button pressed
	onCancel : function(){
		this.hide();
	},
	
	// called when order button pressed
	onOrder : function(){
		Ext.dispatch({
			controller : 'Menu',
			action : 'orderItem',
			item : this.itemData,
			size : this.size
			//historyUrl: 'Cart/Form'
		});
		
		this.onCancel();
	},
	
	// called when order button pressed
	onAdd : function(){
		Ext.dispatch({
			controller : 'Cart',
			action : 'addItem',
			size : this.size,
			item : this.itemData
		});
			
		this.onCancel();
	},
	listeners: {
		// the hide event must be listened - after hide the panel should be destroyed to make sure, that next floating panel will be rendered properly
		hide: function()
		{
			this.destroy();
		}
		
	}
});


Ext.reg('menuPopup', RefApp.views.MenuPopup);